<template>
    <div id="StudentUserMessage">

      <el-form ref="form" :model="studentUser" label-width="80px">
        <el-form-item label="学生名称">
          <el-input v-model="studentUser.studentName"></el-input>
        </el-form-item>
        <el-form-item label="入学年份">
<!--          <el-select v-model="studentIdValue" placeholder="请选择入学年份" @change="findTableList()">&ndash;&gt;-->
          <el-select v-model="studentUser.schoolDate" placeholder="请选择入学年份">
            <el-option v-for="item in schoolDateList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班级">
          <el-select v-model="studentUser.className" placeholder="请选择班级">
            <el-option v-for="item in classList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
<!--          <el-select v-model="studentUser.className" placeholder="请选择班级">-->
<!--            <el-option label="全部" value=""></el-option>-->
<!--            <el-option label="1班" value="1班"></el-option>-->
<!--            <el-option label="2班" value="2班"></el-option>-->
          </el-select>
        </el-form-item>

        <el-form-item label="小组">
          <el-select v-model="studentUser.groupName" placeholder="请选择小组">
            <el-option v-for="item in groupList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
<!--          <el-select v-model="studentUser.groupName" placeholder="请选择小组">-->
<!--            <el-option label="全部" value=""></el-option>-->
<!--            <el-option label="1组" value="1组"></el-option>-->
<!--            <el-option label="2组" value="2组"></el-option>-->
          </el-select>
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="studentUser.phoneNumber"></el-input>
        </el-form-item>

          <el-form-item>
          <el-button type="primary" @click="onSubmit">修改学生信息</el-button>
        </el-form-item>
      </el-form>

    </div>
</template>

<script>
    import ElementUI from "element-ui";
    import { mapState } from "vuex";
    export default {
        name: "StudentUserMessage",
      data () {
        return {
          schoolDateList: [
            {
              value: '',
              label: '全部'
            }
          ],
          classList: [
            {
              value: '',
              label: '全部'
            }
          ],
          groupList: [
            {
              value: '',
              label: '全部'
            }
          ],
          // form:{},
          // studentUser:{},
        }
      },
      methods: { //mounted 是vue的生命周期函数中的其中一个，表示，页面加载完毕执行
          //如果是学生账号，则查询学生信息
        onSubmit(){

          // console.log('find ' +JSON.stringify(this.studentUser))
        const requestData = this.studentUser
          //更新模板数据
          this.$store.dispatch("sportStudent/updateObject", requestData).then((res) => {
              //刷新用户信息
            this.findStudentUser(res.data)

            ElementUI.Message({
              message: '学生信息更新成功',
              type: 'success'
            })
          }).catch((e) => {
            console.log(e)
          });
        },

        findStudentUser(id){
          this.$store.dispatch("sportStudent/findDataById", id).then((res) => {
          }).catch((e) => {
            console.log(e)
          });
        },


        // 查询入学年份
        selectSchoolDateList () {
          const param = {dictType:'school_date_type'}
          this.$store.dispatch("dist/selectDistType", param).then((res) => {
            // console.log("============2 " + JSON.stringify(res))
            if (res != null) {
              this.schoolDateList = []
              this.schoolDateList = res
            }
          }).catch((e) => {
            console.log(e)
          });
        },

        // 查询班级信息
        selectClassList () {
          const param = {dictType:'class_type'}
          this.$store.dispatch("dist/selectDistType", param).then((res) => {
            // console.log("============2 " + JSON.stringify(res))
            if (res != null) {
              this.classList = []
              this.classList = res
            }
          }).catch((e) => {
            console.log(e)
          });

        },
        // 查询小组信息
        selectGroupList () {
          const param = {dictType:'group_type'}
          this.$store.dispatch("dist/selectDistType", param).then((res) => {
            // console.log("============2 " + JSON.stringify(res))
            if (res != null) {
              this.groupList = []
              this.groupList = res
            }
          }).catch((e) => {
            console.log(e)
          });
        },


      },

      created() {
          this.selectSchoolDateList()
          this.selectClassList()
          this.selectGroupList()
      },
      computed:{
          //映射 sportStudent模块下的 studentUser对象
        ...mapState('sportStudent', ['studentUser'])
      },
    }
</script>

<style scoped>

</style>
